<template>
    <div class="Basic">
        <!-- 总计面板 -->
        <div class="totalPlane">
            <div class="totalItem">
                <div class="number">
                    {{totalPlaneData.unAuditedOrderNum}}
                </div>
                <div class="text">
                    订单待审核
                </div>
            </div>
            <div class="totalItem">
                <div class="number">
                    {{totalPlaneData.approcedOrderNum}}
                </div>
                <div class="text">
                    订单已审核
                </div>
            </div>
            <div class="totalItem">
                <div class="number">
                    {{totalPlaneData.unReleased}}
                </div>
                <div class="text">
                    待出库
                </div>
            </div>
            <div class="totalItem">
                <div class="number">
                    {{totalPlaneData.unAuditedRefund}}
                </div>
                <div class="text">
                    待退货审核
                </div>
            </div>
            <div class="totalItem">
                <div class="number">
                    {{totalPlaneData.unRefund}}
                </div>
                <div class="text">
                    待退货
                </div>
            </div>
            <div class="totalItem">
                <div class="number">
                    {{totalPlaneData.unRefundPay}}
                </div>
                <div class="text">
                    待退款
                </div>
            </div>
        </div>

        <!-- 库面板 -->
        <div class="inventoryPlane">
            <div class="inventoryItem">
                <div class="text">待收货</div>
                <div class="detail">
                    <div class="circle">
                        <i class="iconfont icon-daishouhuo"></i>
                    </div>
                    <div class="number">{{inventoryData.unRecive}}</div>
                    <div class="gotoDetail">
                        查看详情<i class="iconfont icon-arrow-drop-right-line"></i>
                    </div>
                </div>
            </div>
            <div class="inventoryItem">
                <div class="text">待入库</div>
                <div class="detail">
                    <div class="circle">
                        <i class="iconfont icon-dairuku"></i>
                    </div>
                    <div class="number">{{inventoryData.unStore}}</div>
                    <div class="gotoDetail">
                        查看详情 <i class="iconfont icon-arrow-drop-right-line"></i>
                    </div>                    
                </div>
            </div>
            <div class="inventoryItem">
                <div class="text">待捡货</div>
                <div class="detail">
                    <div class="circle">
                        <i class="iconfont icon-daijianhuo_icon"></i>
                    </div>
                    <div class="number">{{inventoryData.unPicking}}</div>
                    <div class="gotoDetail">
                        查看详情 <i class="iconfont icon-arrow-drop-right-line"></i>
                    </div>                    
                </div>
            </div>
            <div class="inventoryItem">
                <div class="text">待出货</div>
                <div class="detail">
                    <div class="circle">
                        <i class="iconfont icon-chukudan"></i>
                    </div>
                    <div class="number">{{inventoryData.unRealease}}</div>
                    <div class="gotoDetail">
                        查看详情 <i class="iconfont icon-arrow-drop-right-line"></i>
                    </div>                    
                </div>
            </div>
        </div>

        <!-- 详情列表 -->
        <div class="list">
            <div class="listHeader">
                <h3>库存</h3>
                <div class="datePicker">
                    <el-date-picker
                        v-model="dateData"
                        type="monthrange"
                        range-separator="To"
                        start-placeholder="Start month"
                        end-placeholder="End month"
                    />
                </div>
            </div>
            <div class="listContent">
                <!-- 柱状图 -->
                <div class="warningTrend">
                    <v-charts class="chart" :option="option"/>
                </div>
                <!-- 排行榜排名 -->
                <div class="rankingList">
                    <h3 class="title">排行榜单</h3>
                    <div class="rankingContent">
                        <div class="rankingItem" v-for="(item,index) in ranking" :key="index">
                            <div class="left">
                                <div class="rangkingNum">{{index+1}}</div>
                                <div class="target">{{item.target}}</div>
                            </div>
                            <div class="num">{{item.num}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
export default{
    name:"Basic",
    mounted(){
        document.title = ('画廊商城后台'+'-'+this.$options.name);
    }
}
</script>


<script setup>
import { ref } from 'vue';

//total Plane data 总计面板数据
const totalPlaneData = ref({
    unAuditedOrderNum:8,
    approcedOrderNum:12,
    unReleased:5,
    unAuditedRefund:0,
    unRefund:7,
    unRefundPay:22
})

//inventory data 库存数据
const inventoryData = ref({
    unRecive:489,
    unStore:233,
    unPicking:121,
    unRealease:211
})

//date 日期数据
const dateData = ref('');

//echart data 图表数据
const option = ref({
  xAxis: {
    type: 'category',
    data: [
        '1月',
        '2月',
        '3月',
        '4月',
        '5月',
        '6月',
        '7月',
        '8月',
        '9月',
        '10月',
        '11月',
        '12月',
    ]
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
        data: [120, 200, 150, 80, 70, 110, 130 , 200, 150, 80, 70 , 150],
        type: 'bar',
        itemStyle: {
            color: '#37a3fc',
        }
    }
  ]
})

//ranking data 排行数据
const ranking = ref([
    {
        target:'一号',
        num:339268
    },
    {
        target:'二号',
        num:339268
    },
    {
        target:'三号',
        num:339268
    },
    {
        target:'四号',
        num:339268
    },
    {
        target:'五号',
        num:339268
    },
    {
        target:'六号',
        num:339268
    },
    {
        target:'七号',
        num:339268
    },
    {
        target:'八号',
        num:339268
    },
])
</script>


<style scoped lang="scss">
@import '../style/_theme.scss';
@import '../style/_initGlobalStyle.scss';
.Basic{
    .totalPlane{
        display: flex;
        border-bottom: rgb(241, 241, 241) solid 1px;
        .totalItem{
            width: 100%;
            text-align: center;
            .number{
                font-weight: bolder;
                margin-top: 1vw;
            }
            .text{
                color: grey;
                margin-bottom: 1vw;
            }
        }
    }
    .inventoryPlane{
        display: flex;
        .inventoryItem{
            box-shadow: 0 0 3vw -1.5vw rgb(173, 173, 173);
            border-radius: 0.5vw;
            width: 100%;
            margin: 2vw;
            padding: 1vw;
            .circle{
                width: 2vw;
                height: 2vw;
                border-radius: 2vw;
                text-align: center;
                line-height: 2vw;
            }            
            .text{
                margin-bottom: 1vw;
                font-weight: bold;
            }
            .detail{
                display: flex;
                justify-content: space-around;
                align-items: center;
                .number{
                    font-weight: bolder;
                }
            }
            .gotoDetail{
                font-size: 0.8vw;
                display: flex;
                justify-content: center;
                cursor: pointer;
            }
        }
        .inventoryItem:nth-child(1){
            background-color: lightblue;
            .circle{
                background-color: #4769fa;
                .iconfont{
                    color: rgb(233, 250, 255);
                }
            }
        }
        .inventoryItem:nth-child(2){
            background-color: lightyellow;
            .circle{
                background-color: #f9b039;
                .iconfont{
                    color: rgb(252, 252, 240);
                }
            }
        }
        .inventoryItem:nth-child(3){
            background-color: #e8f5fe;
            .circle{
                background-color: #1a96f6;
                .iconfont{
                    color: rgb(244, 251, 253)
                }
            }
        }
        .inventoryItem:nth-child(4){
            background-color: #f5f0ff;
            .circle{
                background-color: #986cfd;
                .iconfont{
                    color: #ffffff;
                }
            }
        }
    }
    .list{
        box-shadow: 0 0 1vw -1vw black;
        .listHeader{
            border-bottom: solid 1px rgb(240, 240, 240);
            width: 100%;
            padding: 1vw;
            display: flex;
            justify-content: space-between;
        }
        .listContent{
            display: flex;
            .warningTrend{
                width: 70vw;
                .chart{
                    height: 400px;
                }
            }
        }
        .rankingList{
            width: 20vw;
            .title{
                margin: 1vw;
            }
            .rankingContent{
                .rankingItem{
                    width: 100%;
                    display: flex;
                    justify-content: space-around;
                    padding: 0.5vw 0;
                    border-bottom: solid rgb(241, 241, 241) 1px;
                    .left{
                        display: flex;
                        .target{
                            margin-left: 2vw;
                        }
                        .rangkingNum{
                            width: 1vw;
                            height: 1vw;
                            border-radius: 1vw;
                            text-align: center;
                            line-height: 1vw;
                            color: grey;
                            background-color: rgb(212, 212, 212);                                                
                        }
                    }
                    .num{
                        color: grey;
                    }
                }
                .rankingItem:nth-child(1){
                    .rangkingNum{
                        color: white;
                        background-color: darkblue;
                    }
                }
                .rankingItem:nth-child(2){
                    .rangkingNum{
                        color: white;
                        background-color: darkblue;
                    }
                }
                .rankingItem:nth-child(3){
                    .rangkingNum{
                        color: white;
                        background-color: darkblue;
                    }
                }
            }
        }
    }
}
</style>